<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery-2.2.3.min.js}" charset="utf-8"></script>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>

</head>
<body>



<form class="layui-form" id="adminproject" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  autocomplete="on"
                   class="layui-input" id="title" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详细内容</label>
        <div class="layui-input-block">
            <!--            <input type="text" name="content" required  autocomplete="on"-->
            <!--                   class="layui-input" id="content" size="100">-->
            <textarea    required name="content" id="content" style="width: 800px;height: 100px" ></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <select id="kind" name="kind" lay-verify="required" lay-filter="business" class="select" >
                <option value=""></option>
                <option value="软件系统故障">操作系统</option>
                <option value="硬件系统故障">数据库</option>
                <option value="网络安全">网络安全</option>
                <option value="网络安全">硬件设备</option>
                <option value="其他">其他</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            <input type="text" name="label" required  autocomplete="on"
                   class="layui-input" id="label" >
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>

        </div>
    </div>




</form>
<form class="layui-form" id="adminproject2" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  autocomplete="on"
                   class="layui-input" id="title2" disabled="true">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详细内容</label>
        <div class="layui-input-block">
            <!--            <input type="text" name="content" required  autocomplete="on"-->
            <!--                   class="layui-input" id="content" size="100">-->
            <textarea    required name="content" id="content2" style="width: 800px;height: 100px" disabled="true"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <select id="kind2" name="kind" lay-verify="required" lay-filter="business" class="select" disabled="true">
                <option value=""></option>
                <option value="软件系统故障">操作系统</option>
                <option value="硬件系统故障">数据库</option>
                <option value="网络安全">网络安全</option>
                <option value="网络安全">硬件设备</option>
                <option value="其他">其他</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            <input type="text" name="label" required  autocomplete="on"
                   class="layui-input" id="label2" disabled="true">
        </div>
    </div>


</form>

<div class="demoTable">
    搜索标题：
    <div class="layui-inline">
        <input class="layui-input" name="channel" id="demoReload" autocomplete="off" >
    </div>
    搜索标签：
    <div class="layui-inline">
        <input class="layui-input" name="channel" id="demoReload2" autocomplete="off" >
    </div>
    <button class="layui-btn" data-type="reload" id="searchbutton" onclick="search()">搜索</button>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="add2">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>

</script>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script>
    //表单
    layui.use(["table", "form"], function () {
        var table = layui.table;
        var form = layui.form;
        ptable= function () {
            table.render({
                elem: '#test'
                , url: '/support/knowledgelistdata'
                , toolbar: '#toolbarDemo'
                , title: '用户数据表'
                , limit: 10
                , page: true
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        , {
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        fixed: 'left',
                        unresize: true,
                        sort: true,
                        totalRowText: '合计'
                    }

                        , {field: 'title', title: '知识库名称', width: 200}
                        , {field: 'publishtime', title: '创建时间', width: 200}
                        , {field: 'author', title: '创建者', width: 100}

                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
                    ]
                ]

            });
        }
        ptable();

        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {

                case 'add2':

                        layer.open({
                            type: 1,
                            area: ['700px','600px'],
                            title: '项目内容'
                            , content: $("#adminproject"),
                            shade: 0,
                            offset: "10px"

                        });
                    break;
            };
        });
        //监听提交
        form.on('submit(demo1)', function(data){
            var title = $("#title").val();

            var kind = $("#kind").val();
            var content = $("#content").val();
            var label = $("#label").val();
            $.ajax({
                url: '/support/knowledgelistadd',
                type: "POST",
                traditional: true,
                data: {
                    "title": title,
                    "kind": kind,
                    "content": content,
                    "label": label,

                },
                success: function () {

                    location.reload();
                    layer.msg('添加成功');


                }
            });

            return false;
        });



        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var id = data.id;
                    $.ajax({
                        url: '/support/knowledgelistdelete',
                        type: "POST",
                        data: {"id": id},
                        success: function () {
                            ptable();

                        }
                    });
                    layer.close(index);
                });
            }
            if (obj.event === 'look') {



                layer.open({
                    type: 1,
                    area: ['1000px', '500px'],
                    title: '项目名'
                    , content: $("#adminproject2"),
                    shade: 0

                    , success: function (layero, index) {
                        var div = layero.contents().find('#adminproject2');
                        div.find("#title2").val(data.title);
                        div.find("#author2").val(data.author);
                        div.find("#kind2").val(data.kind);

                        div.find("#label2").val(data.label);
                        div.find("#content2").val(data.content);
                        form.render();

                    }


                });
            }
            // else if (obj.event === 'edit') {
            //     layer.open({
            //         type: 1,
            //         area: ['1000px', '500px'],
            //         title: '项目名'
            //         , content: $("#adminproject"),
            //         shade: 0
            //
            //         , success: function (layero, index) {
            //             var div = layero.contents().find('#adminproject');
            //             div.find("#id").val(data.id);
            //             div.find("#title").val(data.title);
            //             div.find("#author").val(data.author);
            //             div.find("#kind").val(data.kind);
            //             div.find("#urgent").val(data.urgent);
            //             div.find("#hopetime").val(data.hopetime);
            //             div.find("#content").val(data.content);
            //
            //
            //             form.render();
            //
            //         }
            //
            //
            //     });
            // }
        });






    });


</script>
<script>
    //搜索


    function  search(){
        var title = $("#demoReload").val();
        var label = $("#demoReload2").val();

        $.ajax({
            url: '/support/knowledgelist/search',
            type: "POST",
            traditional: true,
            data: {
                "title": title,
                "label": label,


            },

            success: function () {
                //执行重载
                ptable()


            }
        });


    }
    // 文件上传
    layui.use(['upload','element'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            ,element = layui.element
        upload.render({
            elem: '#test8'
            , url: '/videomanagement/uploadFile' //改成您自己的上传接口
            , accept: 'video' //普通文件
            ,auto: false
            ,bindAction: '#test9'
            ,before: function(obj){
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {

                access=1

            }
            ,error: function(){
                layer.msg("上传失败");
            }
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    })

</script>
</body>
</html>